<template>
  <div class="yingmoo-enroll">
    <div class="header">
      <div class="header-main">
         <router-link :class="{'router-link-exact-active': $route.name=='ymIndex'}" to="/"><img src="../assets/ym-register/register-logo.png" /></router-link>
         <p>欢迎注册</p>
      </div> 
    </div>
    <div class="main">
     <div class="across">
       <div class="register">
          <img src="../assets/ym-register/register-img.png" />
          <input v-model="member.contentUser" type="text" placeholder="请输入用户名" @blur="checkUsername"/>
       </div>
       <p v-if="username"><img src="../assets/ym-register/warn.png" />{{warning.name}}</p>
     </div>
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input v-model="member.contentPass" type="password" placeholder="设置新密码" @blur="checkPwd"/>
        </div>
       <p v-if="password"><img src="../assets/ym-register/warn.png" />{{warning.pwd}}</p>
     </div>
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/password-img.png" />
          <input v-model="repassword" type="password" placeholder="请确认密码" @blur="checkrepassword"/>
        </div>
       <p v-if="repwd"><img src="../assets/ym-register/warn.png" />{{warning.repwd}}</p>
     </div>
     <div class="across">
        <div class="password">
          <img src="../assets/ym-register/enroll-phone.png" class="enroll-phone" />
          <input v-model="member.mobile" type="text" placeholder="请输入手机号" @blur="checkmobile"/>
        </div>
       <p v-if="mobile"><img src="../assets/ym-register/warn.png" />{{warning.mobile}}</p>
     </div>
     <div class="across">
        <div class="verification">
          <input v-model="checkCode" type="text" placeholder="验证码" @blur="checkPicCode"/>
        </div>
        <div class="verification-code">
          <img width="90px" height="35px" :src="validateUrl"/>
          <img style="cursor: pointer;" src="../assets/ym-register/refresh.png" class="refresh" @click="changeValidateCode"/>
        </div>
       <p v-if="validateCode"><img src="../assets/ym-register/warn.png" />{{warning.checkCode}}</p>
     </div>
     <div class="across">
        <div class="phone-verification">
          <img src="../assets/ym-register/password-img.png" />
          <input v-model="mobileValidateCode" type="text" placeholder="手机验证码" />
          <button id="getValidateCode" class="click-to"  @click="getMobileCheckCode()">
            	<font color="#fff">获取验证码</font><span v-show="!show">{{count}}</span>
          </button>
        </div>
       <p v-if="mobileValidate"><img src="../assets/ym-register/warn.png" />{{warning.mobileValidate}}</p>
     </div>
     <div class="click-to-register">
       <div class="next">
          <input type="checkbox" id="next" checked="checked"/>
          <label for="next">我已阅读并同意 <span><<鹰目网注册协议>></span></label>
        </div>
        <div class="register_btn" @click="register" style="cursor: pointer;">
          立即注册
<!--          v-show="shos==1"-->
        </div>
        <router-link tag="p" :class="{'router-link-exact-active': $route.name=='ymRegister'}" to="/ymRegister" class="enroll">已有账号，<span>直接登录</span></router-link>
     </div>
    </div>
    <div class="footer-copyright">
      <div class="w1200">
        <div class="copyright">
          <p>
            <span>Copyright @ 2012-2017</span>
            <span>北京鹰目网络科技有限公司</span>
            <span>京ICP备14044439号-1</span>
            <img src="../assets/ym-footer/icon-g.png" />
            <span>京公网安备 11010802020633号</span>
          </p>
          <p>
            <span>地址：北京市海淀区上地东路35号颐泉汇大厦D座5层</span>
            <span>热线：400 650 7893</span>
            <span>传真：010-62681689/8248335</span>
          </p>
        </div>
        <div class="safety clearfix">
            <a href="javascript:;"><img src="../assets/ym-footer/safe-360.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-kexin.png" /></a>
            <a href="javascript:;"><img src="../assets/ym-footer/safe-aqlm.png" /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: true,
        count: '',
        timer: null,
        shan: 0,

        member: {},
        requestAddr: this.GLOBAL.addr,
        picCodeValue: null,

        repassword: null, //密码确认值
        checkCode: null, //图片验证码值
        mobileValidateCode: null, //手机验证码值

        username: false, //用户名提示显示
        password: false, //密码提示
        repwd: false, //密码确认提示
        mobile: false, //手机号提示
        validateCode: false, //图片验证码提示
        mobileValidate: false, //手机验证码提示
        warning: {
          name: "请输入6-15位的字符，可由数字、字母、下划线'_'组成！",
          pwd: "密码为6-30位数字、字母和特殊字符的组合!",
          repwd: "请再次输入密码!",
          mobile: "请输入有效的手机号！",
          checkCode: "请输入正确的验证码！",
          mobileValidate: "请输入正确的手机验证码！"
        },
        validateUrl: ""
      }
    },
    mounted() {
      this.changeValidateCode();
      this.validateUrl = this.requestAddr+"/Login/getValidateCode?type=1"
    },
    methods: {
      getCode() {
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              var btn = document.getElementById("getValidateCode");
              btn.removeAttribute("disabled");
              btn.style.background="#42AEF3";
              clearInterval(this.timer);
              this.timer = null;
              
            }
          }, 1000)
        }
      },

      register: function() {
        var tag = this.validate();
        this.member.levelId = 1;
        this.member.shop = 0;
        this.member.status = 1;
        if (tag == true) {
          this.$http.post(this.requestAddr+"/Login/register", this.member, {
            emulateJSON: true
          }).then(
            (res) => {
              localStorage.setItem('user', JSON.stringify(res.data.user));
              localStorage.setItem('level',JSON.stringify(res.data.level));
              if (res.data.code == 0) {
                window.location.href = "../#/";
              }
            },
            (error) => {
              console.log(error);
            });
        }
      },
      /*校验用户名*/
      checkUsername: function() {
        var regex = /^[0-9A-Za-z_]{6,15}$/;
        var name = this.member.contentUser;
        if (this.isEmpty(name)) {
          this.warning.name = "用户名不可为空！";
          this.username = true;
        } else if (regex.test(name)) {
          this.isRegisted(name);
        } else {
          this.warning.name = "请输入6-15位字符的用户名，可由数字、字母、下划线'_'组成！";
          this.username = true;
        }
      },
      /*校验密码*/
      checkPwd: function() {
        var regex = /^[0-9A-Za-z_]{6,15}$/;
        var pwd = this.member.contentPass;
        if (this.isEmpty(pwd)) {
          this.password = true;
          this.warning.pwd = "密码不能为空！";
        } else if (regex.test(pwd)) {
          this.password = false;
        } else {
          this.password = true;
          this.warning.pwd = " 请输入6-30位密码，可以是数字、字母和特殊字符的组合!";
        }
      },
      /*重复密码校验*/
      checkrepassword: function() {
        if (this.isEmpty(this.repassword)) {
          this.repwd = true;
          this.warning.repwd = "请再次输入密码!"
        } else if (this.repassword != this.member.contentPass) {
          this.repwd = true;
          this.warning.repwd = "两次输入密码不一致！";
        } else {
          this.repwd = false;
        }
      },
      /*校验手机号*/
      checkmobile: function() {
        var regex = /^1[3|4|5|7|8][0-9]\d{8}$/;
        var phone = this.member.mobile;
        if (this.isEmpty(phone)) {
          this.mobile = true;
          this.warning.mobile = "手机号不能为空！";
        } else if (regex.test(phone)) {
          this.mobileIsExist(phone);
        } else {
          this.mobile = true;
          this.warning.mobile = "请您输入有效的手机号码！"
        }
      },
      /*判断是否为空*/
      isEmpty: function(param) {
        if (param != null && param.trim() != '') {
          return false;
        } else {
          return true;
        }
      },
      /*校验用户名是否已被注册*/
      isRegisted: function(username) {
        this.$http.post(this.requestAddr + "/Login/isExist", {
          "contentUser": username
        }, {
          emulateJSON: true
        }).then(
          (res) => {
            var d = res.data;
            if (d.code == 0 && d.result == 'yes') {
              this.username = true;
              this.warning.name = "该用户名已被注册！";
            } else {
              this.username = false;
            }
          },
          (error) => {
            console.log(error);
          });
      },
      /*校验手机号是否已经被注册*/
      mobileIsExist: function(mobile) {
        this.$http.post(this.requestAddr + "/Login/mobileIsExist", {
          "mobile": mobile
        }, {
          emulateJSON: true
        }).then(
          (res) => {
            var d = res.data;
            if (d.code == 0 && d.result == 'yes') {
              /*console.log(res.data);*/
              this.mobile = true;
              this.warning.mobile = "该手机号已被注册！";
            } else {
              this.mobile = false;
            }
          },
          (error) => {
            console.log(error);
          });
      },
      /*刷新图片验证码*/
      changeValidateCode: function() {
        this.validateUrl = this.requestAddr + "/Login/getValidateCode?type=1&date=" + new Date();
      },
      /*校验图片验证码*/
      checkPicCode: function() {
        if (this.isEmpty(this.checkCode)) {
          this.validateCode = true;
          this.warning.checkCode = "请先输入验证码！"
          return;
        }
        this.$http.post(this.requestAddr + "/Login/confirmPicCode", {
          "picCode": this.checkCode
        }, {
          emulateJSON: true,
          withCredentials: true
        }).then(
          (res) => {
            console.log(res.data);
            if (res.data.result == 'ok') {
              this.validateCode = false;
            } else {
              this.validateCode = true;
              this.warning.checkCode = "验证码输入错误！"
            }
            var d = res.data;
            this.picCodeValue = d.result.code;
          }, (error) => {
            console.log(error);
          });
      },
      /*获取手机验证码*/
      getMobileCheckCode: function() {
        this.checkmobile();
        this.checkPicCode();
			  var btn = document.getElementById("getValidateCode");
        if (this.mobile == false && this.validateCode == false) {
          this.$http.post(this.requestAddr + "/Login/getShortMessageCode", {
            "mobile": this.member.mobile,
            "picCode": this.checkCode,
            "type": '1'
          }, {
            emulateJSON: true,
            withCredentials: true
          }).then(
            (res) => {
              if (res.data.code == 0) {
                alert("短信已发送成功，请注意查收！");
                btn.disabled='true';
                btn.style.background="#999999"
                this.getCode()
                this.changeValidateCode();
                
              } else {
                console.log(res.data)
                alert("短信发送失败，请稍后重试！")
              }
            }
          )
        }
      },
      //校验手机验证码
      checkMobileCode: function() {
        if (this.isEmpty(this.mobileValidateCode)) {
          this.mobileValidate = true;
          this.warning.mobileValidate = "请输入手机验证码！"
          return;
        }
        console.log(this.mobileValidateCode);
        this.$http.post(this.requestAddr + "/Login/checkSMCValue", {
          "mobileCode": this.mobileValidateCode
        }, {
          emulateJSON: true,
          withCredentials: true
        }).then(
          (res) => {
            if (res.data.code != 0) {
              this.mobileValidate = true;
              this.warning.mobileValidate = "验证码输入有误！";
            } else {
              this.mobileValidate = false;
            }
          }
        )
      },
      validate: function() {
        var flag = true;

        this.checkUsername(); //校验用户名
        this.checkPwd(); //校验密码
        this.checkrepassword(); //校验确认密码
        this.checkmobile(); //校验手机号
        /*this.checkPicCode();//校验图片验证码*/
        this.checkMobileCode();

        if (this.username == true) {
          flag = false
        }
        if (this.password == true) {
          flag = false
        }
        if (this.mobile == true) {
          flag = false
        }
        if (this.repwd == true) {
          flag = false
        }
        if (this.validateCode == true) {
          flag = false
        }
        if (this.mobileValidate == true) {
          flag = false
        }

        return flag;
      }
    }
  }

</script>

<style scoped lang="less">
  .yingmoo-enroll {
    width: 100%;
    .header {
      width: 100%;
      height: 62px;
      background-color: #036eb7;
      .header-main {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: flex-start;
        p {
          color: #81a6de;
          line-height: 62px;
          font-size: 14px;
        }
        img {
          width: 187px;
          height: 50px;
          margin-top: 5px;
        }
      }
    }
    .main {
      width: 1200px;
      height: 779px;
      margin: 0 auto;
      padding-top: 72px;
      .across {
        height: 40px;
        display: flex;
        margin-top: 25px;
        .register {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          img {
            position: relative;
            top: 5px;
            left: 5px;
          }
          input {
            border: none;
            width: 235px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
        }
        .password {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          img {
            position: relative;
            top: 5px;
            left: 5px;
          }
          .enroll-phone {
            left: 9px;
          }
          input {
            border: none;
            width: 235px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
        }
        .verification {
          width: 150px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          input {
            width: 135px;
            height: 33px;
            outline: none;
            border: none;
            padding-left: 13px;
            font-size: 14px;
          }
        }
        .verification-code {
          width: 123px;
          height: 40px;
          margin-left: 8px;
          .refresh {
            margin-bottom: 10px;
            margin-left: 5px
          }
        }
        .phone-verification {
          width: 280px;
          height: 36px;
          border: 1px solid #dddddd;
          margin-left: 400px;
          display: flex;
          img {
            height: 21px;
            position: relative;
            top: 5px;
            left: 5px;
          }
          input {
            border: none;
            width: 130px;
            height: 33px;
            font-size: 14px;
            padding-left: 13px;
            margin-left: 5px;
            outline: none;
          }
          .click-to {
            width: 121px;
            height: 36px;
            background-color: #42AEF3;
            border-radius: 2px;
            font-size: 14px;
            text-align: center;
            line-height: 36px;
            cursor: pointer;
            border: none;
            span{
              margin-left: 10px;
              color: aliceblue;
            }
          }
        }
        p {
          height: 36px;
          color: #f29600;
          font-size: 14px;
          margin-left: 20px;
          line-height: 42px;
          img {
            margin-right: 10px;
          }
        }
      }
      .click-to-register {
        margin-left: 400px;
        .next {
          margin-top: 15px;
          input {
            position: relative;
            top: 2px;
          }
          label {
            font-size: 12px;
            color: #999999;
            span {
              color: #42aef3;
            }
          }
        }
        .register_btn {
          width: 280px;
          height: 40px;
          background-color: #036eb7;
          color: white;
          font-size: 15px;
          line-height: 40px;
          border-radius: 3px;
          margin-top: 10px;
          text-align: center;
        }
        .enroll {
          width: 280px;
          text-align: right;
          color: #999999;
          font-size: 12px;
          line-height: 30px;
          cursor: pointer;
          span {
            color: #f29600;
          }
        }
      }
    }
    .footer-copyright {
      width: 100%;
      height: 108px;
      background: #1a1a1a;
      .w1200 {
        width: 1200px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .copyright {
        color: #fff;
        font-size: 14px;
        line-height: 30px;
        p {
          display: flex;
          align-items: center;
        }
        span {
          margin-right: 10px;
        }
        img {
          margin-right: 3px;
        }
      }
      .safety a {
        float: left;
        margin-left: 12px;
        img {
          display: block;
        }
      }
    }
  }

</style>
